<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <input type="file" multiple>
  <script type="text/javascript">

  //思路是通过XML对象发送 post请求到lesson15/up2，这个路由处理器会将上传的文件解析并且返回到页面上，但是因为这个路由处理器只能处理enctype="....."的表单数据
  //首先通过XML.open()方法发送请求
  //我们的做法同样是要上传文件，但是是通过XML对象来上传文件，再利用xml.send()方法将数据发送出去，然后在检测到 发送请求成功和成功拿到响应时，打印服务器响应

    const input=document.querySelector("input");
         //当上传新文件时，启用这个事件处理函数
       input.addEventListener("change",function (Event){
           //创建一个表单数据对象
            const formdata=new FormData();
             //可以往这个表单数据对象中加数据,调用append(),这个myfiles是添加的数据所对应的字段名，类似于input name
            //for(value of arr) 遍历值而不是key
              for(let file of  Event.target.files){
               formdata.append("myfiles",file);
            });
             upload(formdata);
       });


  function upload(){
    const xml=new XMLHttpRequest();
    xml.open("POST","/lesson15/up2");
    xml.onreadystatechange=function (){
      if(xml.status == 200 && xml.readyState == 4){
        //这个响应在路由处理器里面就是send(req.file)，实际上文件还是得到了解析
        console.log(xml.response);
      }
    }
    xml.send(formdata);
  }
  </script>
</body>
</html>
